<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <div class="modal-header">
        <h3>分配装备</h3>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="equipment-name">装备名称:</label>
          <input id="equipment-name" type="text" :value="equipmentName" disabled />
        </div>
        <div class="form-group">
          <label for="assign-officer">分配给警员:</label>
          <select id="assign-officer" v-model="selectedOfficerNumber">
            <option disabled value="">请选择警员</option>
            <option v-for="officer in policeList" :key="officer.officerNumber" :value="officer.officerNumber">
              {{ officer.name }} ({{ officer.officerNumber }})
            </option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-cancel" @click="$emit('close')">取消</button>
        <button class="btn btn-confirm" @click="assignEquipment">分配</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  equipmentName: string,
  policeList: Array<{ officerNumber: string, name: string }>
}>();

const emit = defineEmits(['close', 'assign']);

const selectedOfficerNumber = ref('');

const assignEquipment = () => {
  console.log('👉 当前选中的警员编号:', selectedOfficerNumber.value);
  console.log('👉 当前选中的警员编号:', selectedOfficerNumber.value);
  if (!selectedOfficerNumber.value) {
    alert('请选择要分配的警员');
    return;
  }
  emit('assign', {
    officerNumber: selectedOfficerNumber.value
  });
};
</script>

<style scoped>
@import "@/assets/styles/views/admin/AssignModal.css";
</style>
